<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2023-07-18 11:39:07
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-26 10:16:07
-->
<template>
  <div class="list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <el-button
          @click="createFuels"
          type="primary"
          v-btnPermission="'ECI_EMISSION_MATERIAL_ADD'"
        >
          <CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>新增
        </el-button>
      </template>
      <template #nameSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.materialName"
          :sub-text="`编号：${scope.row.materialNo}`"
        ></CTableColumn>
      </template>
      <template #unitSlot="{ scope }">
        {{ scope.row.materialUnit.join(',') }}
      </template>
      <template #statusSlot="{ scope }">
        <el-tag :type="renderTag(scope.row.status)">{{
          scope.row.status == enableEnums.ENABLE ? '已启用' : '已停用'
        }}</el-tag>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <AddFuels v-model:visible="addVisible" @refresh="refresh" :info="info"></AddFuels>
  </div>
</template>
<script lang="ts">
export default {
  name: 'FuelsEnergyMaterials'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { useList } from './useList';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { IFactorDetail } from '@/apis/pcf/database//model/factorListModel';
import { updateStatus, delMaterial, editMaterial } from '@/apis/system/config/material';
import { useMessage } from '@/hooks/useMessage';
import AddFuels from './components/AddFuels/index.vue';
import { IPageMaterialResult, IUpdateStatusParams } from '@/apis/system/config/model/materialModel';
import { enableEnums } from '@/constants/enum';
const addVisible = ref(false);
const { createConfirm, createMessage } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useList();
const options = reactive<CPageTableProps>({
  title: '能源/燃料配置',
  descText: '',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: false
});
const [registerPage, { refresh }] = useCPageTable(options);
const renderTag = (status: string) => {
  switch (status) {
    case enableEnums.ENABLE:
      return 'success';
    default:
      return 'info';
  }
};
const info = ref<IPageMaterialResult | undefined>({} as IPageMaterialResult);
const handleEnable = (row: IPageMaterialResult) => {
  createConfirm(
    row.status == enableEnums.ENABLE ? '确认停用？' : '确认启用？',
    row.status == enableEnums.ENABLE
      ? '当前数据停用后，将无法在系统中进行匹配使用。'
      : '确认启用当前数据。',
    {
      iconType: row.status == enableEnums.ENABLE ? 'warning' : '',
      confirmButtonText: row.status == enableEnums.ENABLE ? '停用' : '启用'
    }
  ).then(async () => {
    const params: IUpdateStatusParams = {
      materialNo: row.materialNo,
      status: row.status == enableEnums.ENABLE ? enableEnums.DISABLE : enableEnums.ENABLE
    };
    await updateStatus(params);
    createMessage.success(`${row.status == enableEnums.ENABLE ? '停用' : '启用'}成功！`);
    refresh();
  });
};
const createFuels = (row?: IPageMaterialResult) => {
  addVisible.value = true;
  info.value = undefined;
};

const handleEdit = (row: IPageMaterialResult) => {
  info.value = row;
  addVisible.value = true;
};

const handleDel = (row: IPageMaterialResult) => {
  createConfirm('提示', '确认删除该能源/燃料？', {
    iconType: 'warning',
    confirmButtonText: '删除'
  }).then(() => {
    delMaterial(row.materialNo).then(() => {
      createMessage.success('删除成功！');
      refresh();
    });
  });
};
/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: IPageMaterialResult): TableButtonItem[] {
  return [
    {
      text: '编辑',
      btnPermission: 'ECI_EMISSION_MATERIAL_EDIT',
      onClick: () => handleEdit(row)
    },
    {
      text: row.status == enableEnums.DISABLE ? '启用' : '停用',
      btnPermission: 'ECI_EMISSION_MATERIAL_UPDATE',
      onClick: () => handleEnable(row)
    },
    {
      text: '删除',
      btnPermission: 'ECI_EMISSION_MATERIAL_DELETE',
      onClick: () => handleDel(row)
    }
  ];
}
</script>

<style lang="scss" scoped>
.list-container {
  min-height: 80%;
}
</style>
